<template>
  <div>
    <el-card class="box-card card">

      <!-- top -->
      <div class="top">
        <span>标签名称</span>
        <el-input v-model="search" class="search" placeholder="标签名称" />
        <span>状态</span>
        <el-select placeholder="状态">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
        <el-button class="clear" @click="clearSearch">清空</el-button>
        <el-button type="primary" @click="toSearch">搜索</el-button>
        <el-button icon="el-icon-edit" type="success" round class="addBtn" @click="addUser">新增标签</el-button>
      </div>

      <!-- message  -->
      <div class="message">
        <el-alert
          type="success"
          :closable="false"
          show-icon
        >
          <slot name="title"><span>  共{{ page.total }}条记录</span></slot>
        </el-alert>
      </div>

      <!-- table  -->
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="120"
          />
          <el-table-column
            prop="subjectName"
            label="所属学科"
            width="180"
          />
          <el-table-column
            prop="tagName"
            label="标签名称"
          />
          <el-table-column
            prop="creator"
            label="创建者"
          />
          <el-table-column
            prop="addDate"
            label="创建日期"
          />
          <el-table-column
            prop="state"
            label="状态"
          />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- pagination -->
      <div class="pagination">
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="page.page"
            :page-size="page.size"
            :total="page.total"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
      <!-- addLabel -->
      <addLabel ref="addUserVue" :show-dialog.sync="showDialog" @reAfterAdd="reAfterAdd(page)" />

    </el-card>
  </div>
</template>

<script>
import addLabel from './component/addLabel.vue'
import { getLabelList, delLabel } from '@/api/label'
export default {
  components: {
    addLabel
  },
  data() {
    return {
      search: '',
      showDialog: false,
      page: {
        page: 1, // 当前页码
        size: 10, // 每页显示的条数
        total: 0 // 服务器的总数据
      },
      // 存储所有的用户列表
      tableData: [],
      userId: ''
    }
  },
  created() {
    this.getLabelList(this.page)
  },

  methods: {
    // 搜索按钮
    toSearch() {
      console.log('开始搜索,关键词是：', this.search)
      // 根据username筛选
      this.tableData = this.fuzzyQuery(this.tableData, this.search)
      this.page.total = this.tableData.length
    },
    // 新增用户按钮
    addUser() {
      this.showDialog = true
    },
    // 获取用户列表方法
    async getLabelList(data) {
      console.log('获取用户列表')
      const res = await getLabelList(data)
      console.log(res, '用户列表')
      this.tableData = res.items
      this.page.total = res.counts
    },
    // 切换分页
    async handleCurrentChange(newPage) {
      this.page.page = newPage
      await this.getUserList(this.page)
    },
    // 删除标签
    async handleDelete(id) {
      await this.$confirm('确定删除此标签？')
      await delLabel(id)
      this.getUserList(this.page)
      this.$message.success('删除标签成功')
    },
    // // 编辑按钮
    async handleEdit(row) {
      console.log(row, 'HHHHHHHHHHHHHHHHH')
      // console.log('这是父组件，点击编辑按钮---当前的用户ID', id)
      // 点击编辑按钮，弹出子组件
      this.showDialog = true
      // this.userDetail = await getUserDetail(id)
      // console.log(this.userDetail, '获取用户详细信息')
      // this.userId = id
      this.$refs.addUserVue.rePut(row)
    },

    // 刷新用户列表方法，供子组件$emit调用
    reAfterAdd(page) {
      this.getLabelList(page)
      console.log('reAfterAdd')
    },
    clearSearch() {
      this.search = ''
      this.getLabelList(this.page)
    },
    // 搜索用户的方法
    fuzzyQuery(list, keyWord) {
      var reg = new RegExp(keyWord)
      var arr = []
      for (var i = 0; i < list.length; i++) {
        if (reg.test(list[i].username)) {
          arr.push(list[i])
        }
      }
      return arr
    }

  }
}

</script>

<style scoped>

.card{
  margin-top: 10px;
  margin-right: 15px;
  margin-left: 15px;
  background-color: #fff;
}
.search{
  width: 200px;
  height: 10px;
}
.clear{
  margin-left: 15px;
  /* margin-right: 10px; */
}
.top{
  position: relative;
}
.addBtn{
position: absolute;
right: 15px;
}
.message{
  margin-top: 5px;
  margin-bottom: 5px;
}
.pagination{
  margin-top: 5px;
}
</style>
